<template>
  <div>
    <div class="box">
      <div class="box-left">
        <div class="left-top"></div>
        <div class="left-bottom">
          <div
            class="left-list"
            :class="listIndex == index ? 'left-list-check':''"
            v-for="(item,index) in list"
            :key="index"
            @click="check(index,item.path)"
          >{{item.name}}</div>
        </div>
      </div>
      <div class="box-right">
        <router-view></router-view>
      </div>
    </div>
  </div>
</template>
<script>
export default {
  data() {
    return {
      list: [
        {
          name: "个人设置",
          path: "/PersonalSettings"
        },
        {
          name: "我的资产",
          path: "/MyAssets"
        },
        {
          name: "推广二维码",
          path: "/MyAssets"
        },
        {
          name: "服务支持",
          path: "/MyAssets"
        },
        {
          name: "问题反馈",
          path: "/MyAssets"
        }
      ],
      listIndex: 0
    };
  },
  methods: {
    check(index, path) {
      this.listIndex = index;
      this.$router.push({ path });
    }
  }
};
</script>
<style lang="less" scoped>
.box {
  margin: 1.07rem 3.6rem 0;
}
.box-left {
  float: left;
  margin-right: 0.16rem;
}
.left-top {
  width: 2.5rem;
  height: 1.8rem;
  background: #fff;
}
.left-bottom {
  width: 2.5rem;
  padding: 0.1rem 0 0.3rem;
  background: #fff;
  margin-top: 0.16rem;
}
.left-list {
  font-family: PingFangSC-Medium;
  letter-spacing: -0.39px; /*no*/
  line-height: 0.54rem;
  padding-left: 0.26rem;
  cursor: pointer;
  margin: 0 0.14rem 0;
}
.left-list:hover {
  background: #f2f3f8;
  color: #347de1;
}
.left-list-check {
  background: #f2f3f8;
  color: #347de1;
}
.box-right {
  width: 9.33rem;
  height: 5.7rem;
  background: #fff;
  float: left;
}
</style>


    